<template>
    <el-card>
        <template #header>
            <div>
                <el-form ref="searchFormRef" :model="searchForm" label-width="120px">
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="订单id">
                                <el-input-number v-model="searchForm.orderId" placeholder="请输入" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="订单编号">
                                <el-input v-model="searchForm.orderNumber" placeholder="支持模糊搜索" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="路线id">
                                <el-input-number v-model="searchForm.routeId" placeholder="请输入" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="乘客手机号">
                                <el-input v-model="searchForm.passengerPhoneNumber" placeholder="支持模糊查询" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="座位类型">
                                <el-select v-model="searchForm.seatType" placeholder="请选择" clearable>
                                    <el-option label="商务座" value="0" />
                                    <el-option label="普通座" value="1" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="座位行号">
                                <el-input-number v-model="searchForm.seatRowNo" placeholder="请输入" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="座位列号">
                                <el-input-number v-model="searchForm.seatColNo" placeholder="请输入" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="支付用户手机号">
                                <el-input v-model="searchForm.paidUserPhoneNumber" placeholder="支持模糊查询" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="价格最小">
                                <el-input-number v-model="searchForm.priceStart" placeholder="请输入" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="价格最大">
                                <el-input-number v-model="searchForm.priceEnd" placeholder="请输入" clearable />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="订单状态">
                                <el-select v-model="searchForm.status" placeholder="请选择" clearable>
                                    <el-option label="未支付" value="0" />
                                    <el-option label="已支付" value="1" />
                                    <el-option label="已取消" value="2" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="订单时间开始">
                                <el-date-picker v-model="searchForm.orderTimeStart" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择"/>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="订单时间结束">
                                <el-date-picker v-model="searchForm.orderTimeEnd" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择"/>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col style="margin-left: 950px;">
                            <el-button type="primary" @click="clearSearchForm">清空</el-button>
                            <el-button type="primary" @click="loadDataList">查询</el-button>
                            <el-button type="primary"
                                @click="router.push({ name: 'orderCreate' })">新增</el-button>
                                <el-button type="primary" @click="exportExcel">导出</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </template>
        <Table :columns="columns" :fetch="loadDataList" :dataSource="tableData" :options="tableOptions">
            <!-- 表单列插槽插入 -->
            <!-- 订单id -->
            <template #slotOrderId="{index,row}">
                {{ row.orderId }}
            </template>
            <!-- 订单编号 -->
            <template #slotOrderNumber="{index,row}">
                {{ row.orderNumber }}
            </template>
            <!-- 路线id-->
            <template #slotRouteId="{index,row}">
                {{ row.routeId }}
            </template>
            <!-- 乘客手机号 -->
            <template #slotPassengerPhoneNumber="{index,row}">
                {{ row.passengerPhoneNumber }}
            </template>
            <!-- 座位类型 -->
            <template #slotSeatType="{index,row}">
                {{ row.seatType==0?'商务座':'普通座' }}
            </template>
            <!-- 座位行号 -->
            <template #slotSeatRowNo="{index,row}">
                {{ row.seatRowNo }}
            </template>
            <!-- 座位列号 -->
            <template #slotSeatColNo="{index,row}">
                {{ row.seatColNo }}
            </template>
            <!-- 支付用户手机号 -->
            <template #slotPaidUserPhoneNumber="{index,row}">
                {{ row.paidUserPhoneNumber }}
            </template>
            <!--价格-->
            <template #slotPrice="{index,row}">
                {{ row.price }}
            </template>
            <!--订单时间-->
            <template #slotOrderTime="{index,row}">
                {{ row.orderTime }}
            </template>
            <!-- 状态 -->
            <template #slotStatus="{index,row}">
                <div v-if="row.status===0" style="color: #E6A23C;">未支付</div>
                <div v-else-if="row.status===1" style="color: #67C23A;">已支付</div>
                <div v-else-if="row.status===2" style="color: grey;">已取消</div>
            </template>
            <!-- 操作 -->
            <template #slotOperation="{index,row}">
                <el-link type="primary"
                    @click="router.push({name:'orderUpdate',query:{row:JSON.stringify(row)}})"
                    style="margin-right: 20px">编辑</el-link>
                <el-link type="danger" @click="deleteOrder(row,true)">删除</el-link>
            </template>
        </Table>
    </el-card>
</template>

<script setup>
    import {ref,getCurrentInstance,onMounted} from 'vue';
    import {useRouter} from 'vue-router';
    import Table from "@/components/Table.vue";

    const {proxy} = getCurrentInstance();
    // 路由
    const router = useRouter();
    // 表单样式
    const tableOptions = {
        showIndex: true,
        border: true,
    }
    // 表单
    const tableData = ref({});
    // 表单列
    const columns = [
        {
            label: "订单id",
            prop: "orderId",
            width: "150",
            scopedSlots: "slotOrderId",
            fixed: false,
        },
        {
            label: "订单编号",
            prop: "orderNumber",
            width: "200",
            scopedSlots: "slotOrderNumber",
            fixed: false,
        },
        {
            label: "路线id",
            prop: "routeId",
            width: "150",
            scopedSlots: "slotRouteId",
            fixed: false,
        },
        {
            label: "乘客手机号",
            prop: "passengerPhoneNumber",
            width: "200",
            scopedSlots: "slotPassengerPhoneNumber",
            fixed: false,
        },
        {
            label: "座位类型",
            prop: "seatType",
            width: "200",
            scopedSlots: "slotSeatType",
            fixed: false,
        },
        {
            label: "座位行号",
            prop: "seatRowNo",
            width: "150",
            scopedSlots: "slotSeatRowNo",
            fixed: false,
        },
        {
            label: "座位列号",
            prop: "seatColNo",
            width: "150",
            scopedSlots: "slotSeatColNo",
            fixed: false,
        },
        {
            label: "支付用户手机号",
            prop: "paidUserPhoneNumber",
            width: "200",
            scopedSlots: "slotPaidUserPhoneNumber",
            fixed: false,
        },
        {
            label: "价格/元",
            prop: "price",
            width: "150",
            scopedSlots: "slotPrice",
        },
        {
            label: "订单时间",
            prop: "orderTime",
            width: "300",
            scopedSlots: "slotOrderTime",
            fixed: false,
        },
        {
            label: "订单状态",
            prop: "status",
            width: "150",
            scopedSlots: "slotStatus",
            fixed: false,
        },
        {
            label: "操作",
            prop: "operation",
            width: "200",
            scopedSlots: "slotOperation",
            fixed: "right",
        }
    ]
// 查询表单
const searchForm = ref({});

/**
 * 获取数据
 */
const loadDataList = async ()=>{
    let params = {
        pageNo: tableData.value.pageNo,
        pageSize: tableData.value.pageSize,
    };
    Object.assign(params,searchForm.value);
    if(!params.orderTimeStart || params.orderTimeStart.length == 0){
        delete params.orderTimeStart;
    }
    if(!params.orderTimeEnd || params.orderTimeEnd.length == 0){
        delete params.orderTimeEnd;
    }
    let result = await proxy.Request.request({
        url: proxy.Api.loadOrderList,
        params: params,
    });
    if(!result){
        return;
    }
    Object.assign(tableData.value,result.data);
}
/**
 * 删除订单
 */
const deleteOrder = async (row,needConfirm=false)=>{
    if(needConfirm){
        proxy.Confirm({
            message: "确定要删除订单吗？",
            okfun: ()=>deleteOrder(row,false)
        });
        return;
    }
    let result = await proxy.Request.request({
        url: proxy.Api.deleteOrder,
        params: {
            orderId: row.orderId
        }
    });
    if(!result){
        return;
    }
    proxy.Message.success("删除成功");
    loadDataList();
}
/**
 * 清空搜索表单
 */
const clearSearchForm = ()=>{
    searchForm.value = {};
}
onMounted(()=>{
    loadDataList();
})
/**
 * 导出数据
 */
const exportExcel = async (row,needConfirm=false)=>{
    if(needConfirm){
        proxy.Confirm({
            message: "确定要导出数据吗？",
            okfun: ()=>exportExcel(row,false)
        });
        return;
    }
    const orderList = (tableData.value.list || []).map((item) => item);
    if (orderList.length === 0) {
        proxy.Message.warning("当前没有可导出的订单数据");
        return;
    }
    let result = await proxy.Request.requestJSON({
        url: proxy.Api.exportOrderExcel,
        params: orderList, 
        responseType: 'arraybuffer'
    });
    if(!result){
        return;
    }
    /* var disposition = result.headers['content-disposition'];
    var fileName = decodeURI(disposition.substring(disposition.indexOf('filename=') + 9, disposition.length)); */
    let blob = new Blob([result.data], { type: 'application/vnd.ms-excel' });
    const fileName = "订单数据excel.xlsx";
    if (window.navigator && window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
    } else {
        const link = document.createElement('a');
        link.style.display = 'none';
        var href = URL.createObjectURL(blob);
        link.href = href;
        link.setAttribute('download', fileName);
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(href);
    }
    proxy.Message.success("导出成功");
}

</script>

<style scoped>
.el-card {
    width: auto;
}

.el-form {
    .el-form-item {
        width: 300px;
    }
    .el-input-number{
        width: 180px;
    }
}
</style>